<template>
    <div class="op-dialog">
      <el-dialog
        v-model="visible"
        center
        :close-on-click-modal="false"
        :title="title"
        width="800"
      >
        <template #default>
          <el-form ref="formRef" label-width="100" :model="model" :rules="rules">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="model.name" />
                </el-form-item>
              </el-col>
  
              <el-col :span="12">
                <el-form-item label="标识" prop="label">
                  <el-input v-model="model.label" />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input v-model="model.remark" type="textarea" rows="3" />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="功能权限">
                  <MenuCheck v-model="model.menuIdList" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
  
        <template #footer>
          <el-space>
            <el-button type="default" @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
          </el-space>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import MenuCheck from "@/components/menu-check/index.vue";
  import { addRole, updateRole } from "@/api/system";
  
  export default {
    name: "OpDialog",
  
    components: {
      MenuCheck,
    },
  
    emits: ["success"],
  
    data() {
      return {
        visible: false,
        title: "新增",
  
        id: null, // 当前操作的数据Id
        // 表单数据
        model: {
          name: "", // 名称
          label: "", // 标识
          remark: "", // 备注
          menuIdList: [], // 功能权限
        },
        // 表单校验规则
        rules: {
          name: [{ required: true, message: "请输入" }],
          label: [{ required: true, message: "请输入" }],
        },
      };
    },
  
    methods: {
      // open
      open(row) {
        // 1. 判断 row 是否有值,来处理不同的逻辑
        if (row) {
          // 编辑
          this.title = "编辑";
          this.id = row.id;
  
          // 回填数据
          this.model.name = row.name;
          this.model.label = row.label;
          this.model.remark = row.remark;
          this.model.menuIdList = row.menuIdList || [];
  
          this.visible = true;
        } else {
          // 新增
          this.title = "新增";
          this.id = null;
  
          // 回填数据
          this.model.name = "";
          this.model.label = "";
          this.model.remark = "";
          this.model.menuIdList = [];
  
          this.visible = true;
        }
  
        // // 1. 打开弹窗
        // this.visible = true;
        // console.log("row", row);
      },
  
      // 取消
      handleCancel() {
        this.visible = false;
      },
  
      // 确定
      handleConfirm() {
        // 1. 表单校验
        this.$refs.formRef.validate(async (flag) => {
          if (!flag) return;
  
          // 2. 校验通过 调用接口
          if (this.id) {
            // 编辑
            await updateRole({ ...this.model, id: this.id });
          } else {
            // 新增
            await addRole(this.model);
          }
  
          // 3. 关闭弹窗
          this.visible = false;
  
          // 4. 触发一个成功的自定义事件
          this.$emit("success");
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .op-dialog {
    :deep(.el-dialog__footer) {
      text-align: right;
    }
  }
  </style>